<template>
  <div class="home">
    <div class="main">
      <router-view></router-view>
    </div>
    <van-tabbar 
      v-model="active"
      active-color="#d5682a"
      inactive-color="#ccc"
      route
    >
      <van-tabbar-item to="/home/cookbook" icon="home-o">美食大全</van-tabbar-item>
      <van-tabbar-item to="/home/category" icon="apps-o">分类</van-tabbar-item>
      <van-tabbar-item v-if="isShowMap" to="/home/map" icon="coupon-o">美食地图</van-tabbar-item>
      <van-tabbar-item to="/home/more" icon="more-o">更多</van-tabbar-item>
    </van-tabbar>
  </div>
</template>

<script>
import { ref, onMounted, computed } from 'vue'
import { Tabbar, TabbarItem } from 'vant'
// import Cookbook from './cookbook/Cookbook'

import { useStore } from 'vuex'

export default {
  components: {
    'van-tabbar': Tabbar,
    'van-tabbar-item': TabbarItem,
    // Cookbook
  },

  setup() {
    let active = ref(0)
    const store = useStore()

    return {
      active,
      isShowMap: computed(() => store.state.isShowMap)
    }
  }
}
</script>

<style lang='stylus' scoped>
div.home
  padding-bottom .50rem
  .main
    height 100%
    // overflow-y scroll
</style>